<template>
  <div>
    <input placeholder="输入关键字搜索" v-model='msg'>
    <table class="my-table">
      <thead >
        <tr>
          <th>就诊日期</th>
          <th>患者姓名</th>
          <th>诊断结果</th>
          <th>处方信息</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody @click="fn">
       <RenderList v-for="(item,index) in list" :key="item.uname" :uname='item.uname' :res='item.res' :time='item.time' :health='item.health' :index='index'></RenderList>
      </tbody>
    </table>
    <div class="massage" v-show="flag">
      <h1>纠正详细记录 <span class='close' @click="cls">X</span></h1>
      
      <p>就诊日期:{{obj.time}}</p>
      <p>医生姓名:{{obj.uname}}</p>
      <p>诊断结果:{{obj.res}}</p>
      <p>处方信息:{{obj.health}}</p>
    </div>
  </div>
</template>
<script>
import RenderList from './components/RenderList.vue'
export default {
  components:{
    RenderList
  },
  data(){
    return {
      list:[{
        time:'2020-12-12',
        uname:'章三',
        res:'癌症',
        health:'健康',
      },{
        time:'2020-12-12',
        uname:'丁振展',
        res:'肺癌',
        health:'健康',
      },{
        time:'2020-12-12',
        uname:'劳作栋',
        res:'脑癌',
        health:'健康',
      },
      ],
      msg:'',
      list2:[{
        time:'2020-12-12',
        uname:'章三',
        res:'癌症',
        health:'健康',
      },{
        time:'2020-12-12',
        uname:'丁振展',
        res:'肺癌',
        health:'健康',
      },{
        time:'2020-12-12',
        uname:'劳作栋',
        res:'脑癌',
        health:'健康',
      },
      ],
      flag:false,
      num:'',
      obj:{},
    }
  },
  methods:{
    fn(e){
      console.log(e.target.dataset.id);
      if (e.target.dataset.id) {
        this.num=e.target.dataset.id
        this.flag=true
        this.obj = this.list[this.num]
        console.log(this.list[this.num]);
        // console.log(1);
      }
    },
    cls(){
      this.flag=false
    }
  },
  watch:{
    msg(newvalue){
      if(newvalue===''){
        this.list=this.list2
      }else{
        this.list=this.list2
         this.list=this.list.filter(item=>{
        for(let k in item){
          if (item[k]===newvalue) {
            return item
          }
        }
      })  
      }
        
    }
  }
}
</script>

<style >
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }

  .my-table td, .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }

  .my-table th {
    background-color: #f2f2f2;
  }
  .massage{
    margin: 50px auto;
    width: 300px;
    border: 1px solid #087;
    text-align: center;
  }
  .close{
    color:red
  }

</style>
